<template>
  <!-- 自封装手势滑动组件 -->
  <view @touchstart="handletouchstart" @touchend="handletouchend">
    <slot></slot>
  </view>
</template>
<script>
export default {
  data() {
    return {
      startTime: 0,
      startX: 0,
      startY: 0
    };
  },
  methods: {
    handletouchstart(e) {
      this.startTime = Date.now();
      this.startX = e.changedTouches[0].clientX;
      this.startY = e.changedTouches[0].clientY;
    },
    /* 手机离开事件 */
    handletouchend(e) {
      let endTimi = Date.now();
      let endX = e.changedTouches[0].clientX;
      let endY = e.changedTouches[0].clientY;
      let atY = Math.abs(endY - this.startY);
      let fangxiang = "";

      if (endTimi - this.startTime > 2000) {
        return;
      }
      //
      if (Math.abs(endX - this.startX) > 10 && atY < 10) {
        fangxiang = endX - this.startX > 0 ? "right" : "left";
        console.log(fangxiang);
      } else {
        return;
      }
      /* 子组件向父组件传值 */
      this.$emit("swiperaction", { fangxiang });
    }
  }
};
</script>
<style lang="less" scoped>
</style>